@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Medula+One&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");


#row::after {
  content: "";
  clear: both;
  display: table;
}

#column2img {
  float: left;
  width: 50%;
  padding: 5px;
}

#column3img {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.police1light {
  font-family: 'Medula One', cursive;
  src: url('../fonts/MedulaOne-Regular.ttf') format('truetype');
  color: white;
}
.police1 {
  font-family: 'Medula One', cursive;
  src: url('../fonts/MedulaOne-Regular.ttf') format('truetype');
  margin-bottom: 0;
}

.police2light {
  font-family: 'Libre Baskerville', serif;
  src: url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-size: 15px;
  text-align: center;
  color: white;
}
.police2 {
  font-family: 'Libre Baskerville', serif;
  src: url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-size: 15px;
  text-align: center;
}

#centrer{
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#titre1 {
  font-weight: bolder;
}

#titre2 {
  font-weight: bold;
}
#margin {
  margin: 15px;
}

.dark {
  background-image: url("../img/zelda-bg_pattern_brown.png");
}

.light {
  background-image: url("../img/zelda-bg_pattern_white.png");
}

/*


@font-face {
  font-family: 'Libre Baskerville', serif;
  src: url("../fonts/LibreBaskerville-Bold.ttf") format('truetype');
  font-weight: bold;
}




/*

Polices : Medula One pour les titres et boutons, Libre Baskerville pour le reste

h1 64px

h2 48px

h3 36px 

i 36px

nav items 24px

Couleur dorée : #af966d

*/

/* BACKGROUND 

.dark {
    /* Image de fond : zelda-bg_pattern_brown.png 
}

.light {
    /* Image de fond : zelda-bg_pattern_white.png 
}

/* GRID CSS 

.wrapper {
    
}
  
 .sidebar {
    
}
  
.content-1 {

}
  
.content-2 {

}
  
.content-3 {

}
  
/* Bouton 

.btn {
   
}

/* Flexbox 
  
.myFlex {

}

/******************/

/* DIVIDER */


*, :after, :before {
  box-sizing: border-box;
}

.hl-arrow { 
  position: relative;
  display: block;
  background-color: #AF966D;
  margin: 17px auto 12px;
  max-width: 307px;
  height: 2px;
  opacity: 0;
  width: 0;
  -webkit-transition: width 2s 0.1s cubic-bezier(0.49, 0.02, 0.29, 1.06), opacity 0.6s 0.1s ease;
  transition: width 2s 0.1s cubic-bezier(0.49, 0.02, 0.29, 1.06), opacity 0.6s 0.1s ease;
}
.hl-arrow {
  width: 100%;
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .hl-arrow {
      max-width: inherit;
      width: 60%;
      margin: 14px auto 13px;
  }
}
.hl-arrow:before, .hl-arrow:after {
position: absolute;
content: "";
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4yLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iZGl2aWRlciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIyNXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDI1IDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1IDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNCNjlBNjg7fQ0KPC9zdHlsZT4NCjxwb2x5Z29uIGlkPSJhcnJvdyIgY2xhc3M9InN0MCIgcG9pbnRzPSIyNC41LDUuMDI3IDIxLjgyMiw3Ljc0NCAxOS4zNDMsNS4yMyAxNy4wOTUsNy43NDQgMC41LDQuMjY3IDAuNSwzLjk3NyAxNy4wOTUsMC41IA0KCTE5LjM0MywzLjAxNCAyMS44MjIsMC41IDI0LjUsMy4yMTYgIi8+DQo8L3N2Zz4NCg==") center center no-repeat;
width: 24px;
height: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
        transform: translateY(-50%);
}
.hl-arrow:before {
left: -24px;
}
.hl-arrow:after {
-webkit-transform: translateY(-50%) scaleX(-1);
        transform: translateY(-50%) scaleX(-1);
right: -24px;
}